<template>
  <!-- pc -->
  <div>
    <div class="PCheader">
      <div class="header ">
        <div class="logo" @click="toHome">
          <img src="../assets/logo.png" alt="">
        </div>
        <div class="searchInput">
          <div class="select" @click="showSelect = !showSelect">
            {{ tablist[tabIndex] }}
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="tabler-icon tabler-icon-chevron-down">
              <path d="M6 9l6 6l6 -6"></path>
            </svg>

            <div class="morelist" v-show="showSelect">
              <div class="li" :class="index == tabIndex ? 'active' : ''" v-for="(item, index) in tablist" :key="index">{{
                item
              }}
              </div>
            </div>
          </div>
          <div class="inputs">
            <input type="text" :placeholder="$t('top.top3')">
            <div class="jiegang">/</div>
          </div>
          <div class="searchBtn">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="tabler-icon tabler-icon-search">
              <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
              <path d="M21 21l-6 -6"></path>
            </svg>
          </div>
        </div>
        <div class="btns">
          <div class="list" @click="toCreat">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="tabler-icon tabler-icon-brush">
              <path d="M3 21v-4a4 4 0 1 1 4 4h-4"></path>
              <path d="M21 3a16 16 0 0 0 -12.8 10.2"></path>
              <path d="M21 3a16 16 0 0 1 -10.2 12.8"></path>
              <path d="M10.6 9a9 9 0 0 1 4.4 4.4"></path>
            </svg>
            <span>{{ $t('top.top1') }}</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
              class="tabler-icon tabler-icon-chevron-right">
              <path d="M9 6l6 6l-6 6"></path>
            </svg>
          </div>
          <div class="list loginBtn" @click="toLogin" v-if="!isLogin">
            {{ $t('top.top2') }}
          </div>
          <div class="userlogo" v-else @click="toMyInfo">
            <img
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fa4f5df9c-74df-4a6c-ac3b-5534a7626188%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1711271535&t=1e177b1665857443acee0c14426505d7"
              alt="">
            <div class="flex huizhang">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                stroke="yellow.7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="tabler-icon tabler-icon-bolt" style="fill: rgb(245, 159, 0);">
                <path d="M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11"></path>
              </svg>
              100
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mobileheader">
      <div class="searchShow" v-if="showSearch">
        <input type="text" @blur="showSearch = !showSearch" placeholder="Search Civitai">
      </div>
      <div class="logoss" @click="toHome">
        <svg class="__mantine-ref-svg mantine-mr0ie9" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 107 22.7">
          <g class="mantine-1ct6hp1">
            <path class="__mantine-ref-c mantine-1e6wg96" d="M20.8,1.7H3.7L1.5,4.1v15l2.3,2.3h17.1v-5.2H6.7V7h14.1V1.7z">
            </path>
            <path class="__mantine-ref-ivit mantine-1e6wg96" d=""></path>
            <path class=""></path>
            <path class="" d="M46.7,16.2v5.1h-5.1"></path>
          </g>
          <g class="__mantine-ref-badge mantine-1vi89gt">
            <linearGradient id="innerGradient" gradientUnits="userSpaceOnUse" x1="10.156" y1="22.45" x2="10.156"
              y2="2.4614" gradientTransform="matrix(1 0 0 -1 0 24)">
              <stop offset="0" style="stop-color:#081692"></stop>
              <stop offset="1" style="stop-color:#1E043C"></stop>
            </linearGradient>
            <linearGradient id="outerGradient" gradientUnits="userSpaceOnUse" x1="10.156" y1="22.45" x2="10.156" y2="2.45"
              gradientTransform="matrix(1 0 0 -1 0 24)">
              <stop offset="0" style="stop-color:#1284F7"></stop>
              <stop offset="1" style="stop-color:#0A20C9"></stop>
            </linearGradient>
            <path style="fill:url(#innerGradient)" d="M1.5,6.6v10l8.7,5l8.7-5v-10l-8.7-5L1.5,6.6z"></path>
            <path style="fill:url(#outerGradient)"
              d="M10.2,4.7l5.9,3.4V15l-5.9,3.4L4.2,15V8.1 L10.2,4.7 M10.2,1.6l-8.7,5v10l8.7,5l8.7-5v-10C18.8,6.6,10.2,1.6,10.2,1.6z">
            </path>
            <path style="fill:#fff"
              d="M11.8,12.4l-1.7,1l-1.7-1v-1.9l1.7-1l1.7,1h2.1V9.3l-3.8-2.2L6.4,9.3v4.3l3.8,2.2l3.8-2.2v-1.2H11.8z">
            </path>
          </g>
        </svg>
      </div>
      <div class="morebtns">
        <div class="create" @click="toCreat">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            class="tabler-icon tabler-icon-brush">
            <path d="M3 21v-4a4 4 0 1 1 4 4h-4"></path>
            <path d="M21 3a16 16 0 0 0 -12.8 10.2"></path>
            <path d="M21 3a16 16 0 0 1 -10.2 12.8"></path>
            <path d="M10.6 9a9 9 0 0 1 4.4 4.4"></path>
          </svg>
        </div>
        <div @click="showSearch = !showSearch">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      tablist: [this.$t('top.top4'), this.$t('top.top5'), this.$t('top.top6'), this.$t('top.top7'), this.$t('top.top8'), this.$t('top.top9')],
      tabIndex: 0,
      showSelect: false,
      isLogin: false,
      showSearch:false
    };
  },
  created() {
    this.isLogin = sessionStorage.getItem('token') ? true : false
  },
  mounted() {
  },
  methods: {
    toMyInfo() {
      this.$router.push('/My')
    },
    toHome() {
      this.$router.push('/')
    },
    toCreat() {
      this.$router.push('/creatVideo')
    },
    toLogin() {
      this.$router.push('/login')
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  height: 69px;
  box-sizing: border-box;
  padding: 0 40px 0 8px;
  display: flex;
  align-items: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: #1a1b1e;

  .logo {
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .tag {
    border-radius: 4px;
    font-weight: 600;
    line-height: 1;

    font-size: 24px;
    user-select: none;
    border: 1px solid transparent;
    background-color: rgba(47, 158, 68, 0.2);
    color: rgb(178, 242, 187);
    cursor: pointer;
    position: relative;
    z-index: 3;
    padding: 2px 4px;
    height: 30px;
    width: 49px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;

  }

  .btns {
    display: flex;
    align-items: center;

    .list {
      display: flex;
      align-items: center;
      height: 36px;
      background-color: #1a2d3f;
      color: #9acbf0;
      border-radius: 5px;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 14px;
      font-size: 13px;
      margin-left: 10px;
      font-weight: bold;
      cursor: pointer;

      span {
        margin: 0 10px;
      }
    }

    .loginBtn {
      border: 1px solid #373A40;
      background-color: #25262b;
      color: #fefefe;
    }
  }

  .userlogo {
    margin-left: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;

    img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin-right: 5px;
    }

    .huizhang {
      font-size: 13px;
      text-decoration: none;
      box-sizing: border-box;
      display: inline-flex;
      -webkit-box-align: center;
      align-items: center;
      -webkit-box-pack: center;
      justify-content: center;
      width: auto;
      text-transform: uppercase;
      border-radius: 2px;
      font-weight: 700;
      letter-spacing: 0.25px;
      cursor: inherit;
      text-overflow: ellipsis;
      overflow: hidden;
      color: rgb(245, 159, 0);
    }
  }

  .searchInput {
    height: 36px;
    display: flex;
    align-items: center;

    .select {
      display: flex;
      align-items: center;
      height: 100%;
      justify-content: space-between;
      padding: 0 10px;
      box-sizing: border-box;
      width: 100px;
      background-color: #343a40;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      cursor: pointer;
      color: #c1c2c5;
      position: relative;

      .morelist {
        position: absolute;
        width: 100%;
        background-color: #25262b;
        top: 45px;
        left: 2px;
        border-radius: 5px;
        border: 1px solid #373a40;
        box-sizing: border-box;
        padding: 5px;
        z-index: 1000000;

        .li {
          height: 35px;
          display: flex;
          align-items: center;
          border-radius: 5px;
          padding-left: 10px;
          box-sizing: border-box;
        }

        .li:hover {
          background-color: #373a40;
          color: #fff;
        }

        .active {
          background-color: #1971c2;
          color: #fff;
        }

        .active:hover {
          background-color: #1971c2 !important;
          color: #fff;
        }
      }
    }

    .inputs {
      position: relative;

      input {
        box-sizing: border-box;
        font-size: 14px;
        width: 100%;
        color: rgb(193, 194, 197);
        display: block;
        text-align: left;
        min-height: 36px;
        padding-left: 12px;
        padding-right: 36px;
        border: 1px solid rgb(55, 58, 64);
        background-color: rgb(37, 38, 43);
        transition: border-color 100ms ease 0s;
        border-radius: 0px;
        width: 660px;
      }

      .jiegang {
        text-decoration: none;
        font-weight: bold;
        border: 1px solid rgb(55, 58, 64);
        border-radius: 4px;
        background-color: rgb(26, 27, 30);
        color: rgb(173, 181, 189);
        text-align: center;
        width: 24px;
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        height: 80%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }

      input:focus {
        outline: none;
        border-color: rgb(25, 113, 194);
      }
    }

    .searchBtn {
      box-sizing: border-box;
      border: 1px solid transparent;
      position: relative;
      height: 36px;
      min-height: 36px;
      width: 36px;
      min-width: 36px;
      border-radius: 0px 4px 4px 0px;
      padding: 0px;
      line-height: 1;
      display: flex;
      -webkit-box-align: center;
      align-items: center;
      -webkit-box-pack: center;
      justify-content: center;
      background-color: rgb(52, 58, 64);
      color: rgb(254, 254, 254);
      cursor: pointer;
    }

    .searchBtn:hover {
      background-color: rgb(73, 80, 87);
    }
  }
}

.PCheader {
  display: block;
}

.mobileheader {
  display: none;
}



@media screen and (max-width:768px) {
  .PCheader {
    display: none;
  }

  .mobileheader {
    display: block;
    height: 69px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 10px;
    position: relative;
    .searchShow{
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 10;
      background-color: #2c2e33;
      left: 0;
      border-bottom: 1px solid #2c6aaf;
      input{
        color: #fff;
        height: 100%;
        width: 100%;
        padding: 0 20px;
      background-color: #2c2e33;
        font-size: 14px;
      }
    }

    .logoss {
      width: 45px;
      height: 45px;

      svg {
        height: 45px;
      }
    }

    .morebtns {
      display: flex;
      align-items: center;

      .create {
        width: 46px;
        height: 38px;
        background-color: rgba(25, 113, 194, 0.2);
        color: #a5d8ff;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      div {
        margin-left: 10px;

      }
    }
  }

}</style>
